<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas {
      margin: 50px auto 0;
      display: block;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <canvas id="canvasId" width="400" height="400">
    此浏览器不支持canvas
  </canvas>
</body>

</html>
<script>
  const ctx = document.getElementById("canvasId");
  const gl = ctx.getContext("webgl");

  // 定义顶点着色器源码 gl_Position vec4(1.0, 0.0, 0.0, 1.0) x,y,z, w齐次坐标 （x/w,y/w,z/w）
  const VERTEX_SHADER_SOURCE = `
    attribute vec4 aPosition;
    attribute vec4 aColor;
    varying vec4 vColor;

    uniform mat4 mat;
    void main() {
      // 设置顶点位置
      gl_Position = mat * aPosition;
      vColor = aColor;
    }
  `;

  // 定义片元着色器源码
  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    varying vec4 vColor;
    // 主函数
    void main() {
      // 设置片元颜色为红色 
      gl_FragColor = vColor;
    }
  `;

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);
  const aPosition = gl.getAttribLocation(program, "aPosition"); // 获取attribute变量的存储位置
  const aColor = gl.getAttribLocation(program, "aColor"); // 获取attribute变量的存储位置
  const mat = gl.getUniformLocation(program, "mat"); // 获取attribute变量的存储位置

  // 顶点
  const vertices = new Float32Array([
    // 0123
    1, 1, 1,
    -1, 1, 1,
    -1, -1, 1,
    1, -1, 1,
    // 0345
    1, 1, 1,
    1, -1, 1,
    1, -1, -1,
    1, 1, -1,
    // 0156
    1, 1, 1,
    1, 1, -1,
    -1, 1, -1,
    -1, 1, 1,
    // 1267
    -1, 1, 1,
    -1, 1, -1,
    -1, -1, -1,
    -1, -1, 1,
    // 2347
    -1, -1, 1,
    1, -1, 1,
    1, -1, -1,
    -1, -1, -1,
    // 4567
    1, -1, -1,
    1, 1, -1,
    -1, 1, -1,
    -1, -1, -1,
  ])
  const buffer = gl.createBuffer(); // 创建缓冲区对象
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 绑定缓冲区对象
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // 向缓冲区对象写入数据
  gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); // 将缓冲区对象分配给attribute变量
  gl.enableVertexAttribArray(aPosition); // 开启attribute变量（激活）

  const colors = new Float32Array([
    0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0,
    0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4,
    1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4,
    1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4,
    1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
  ])

  const colorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
  gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(aColor)

  const indeces = new Uint8Array([
    0, 1, 2, 0, 2, 3,
    4, 5, 6, 4, 6, 7,
    8, 9, 10, 8, 10, 11,
    12, 13, 14, 12, 14, 15,
    16, 17, 18, 16, 18, 19,
    20, 21, 22, 20, 22, 23,
  ])
  const indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indeces, gl.STATIC_DRAW);

  let eyex = 3;
  let eyey = 3;
  let eyez = 5;

  let deg = 0;
  function draw() {
    deg += 0.01;
    const rotate = getRotateMatrix(deg)
    const vm = getViewMatrix(eyex, eyey, eyez, 0.0, 0.0, 0.0, 0.0, 0.6, 0.0);
    const perspective = getPerspective(30, ctx.width / ctx.height, 100, 1);
    // const matrix = getTranslateMatrix(x, x);
    gl.enable(gl.DEPTH_TEST);
    gl.uniformMatrix4fv(mat, false, mixMatrix(mixMatrix(perspective, vm), rotate));
    gl.drawElements(gl.TRIANGLES, indeces.length, gl.UNSIGNED_BYTE, 0); // gl.POINTS绘制点，0表示从第0个点开始绘制，1表示绘制1个点

    requestAnimationFrame(draw);
  }
  draw();

</script>